<template>
  <div>
    <div class="provider-list">
      <div class="content" v-if="!loading">
        <div class="container">
          <div class="head">
            <div>
              <span style="font-size: 16px" class="title">专家信息</span>
              <span class="ml50" style="color: #ff6600">{{
                detail.shenhe.code == 1 ? "已认证" : "未认证"
              }}</span>
            </div>
            <el-button @click="$router.go(-1)">返回</el-button>
          </div>
          <div class="body">
            <div class="flex avatar">
              <img
                v-if="detail.zhuanjiazhaopian && detail.zhuanjiazhaopian.length"
                :src="detail.zhuanjiazhaopian[0].filePath"
                alt=""
              />
              <span
                v-if="detail.shenhe && detail.shenhe.code"
                class="ml50 title"
                >{{ detail.shenhe.code == 1 ? "已认证" : "未认证" }}</span
              >
            </div>
            <div class="flex info">
              <p>
                <span class="title">名称：</span>{{ detail.zhuanjiamingcheng }}
              </p>
              <p>
                <span class="title">所属公司：{{ detail.qiye }}</span>
              </p>
              <p><span class="title">职称：</span>{{ detail.zhicheng }}</p>
              <p><span class="title">专家标签：</span>{{ detail.biaoqian }}</p>
              <p class="mt40">
                <span class="title">联系方式/账号：</span
                >{{ detail.lianxifangshi }}
              </p>
              <p class="mt40">
                <span class="title">密码：</span>{{ detail.mima }}
              </p>
              <p class="mt40">
                <span class="title">邮箱：</span>{{ detail.youxiang }}
              </p>
              <p class="mt40">
                <span class="title">一级业务类型：</span
                >{{ detail.yewuleixing1 }}
              </p>
              <p class="mt40">
                <span class="title">二级业务类型：</span
                >{{ detail.yewuleixing2 }}
              </p>
              <p class="mt40">
                <span class="title">三级业务类型：</span
                >{{ detail.yewuleixing3 }}
              </p>
            </div>
            <div class="certification">
              <p class="title">专业证书：</p>
              <div class="flex certificationImg">
                <img
                  v-for="(item, index) in detail.zhuanyezhengshu"
                  :src="item.filePath"
                  :key="index"
                  alt=""
                />
              </div>
            </div>
            <div class="mt40 excel">
              <span class="title">擅长及简介：</span>
              <span class="intro">{{ detail.shanchang }}</span>
            </div>
            <div class="mt40 excel">
              <span class="title">审核状态：</span>
              <span class="intro">{{
                detail.shenhe.code == 1
                  ? "已通过"
                  : detail.shenhe.code == -1
                  ? "未通过"
                  : "待审核"
              }}</span>
            </div>
          </div>
        </div>
        <div class="providerTable">
          <el-tabs
            @tab-click="tabChange"
            v-model="activeName"
            class="provider-tabs"
          >
            <el-tab-pane class="achievement" label="业绩案例" name="1">
              <div class="head">
                <div class="left">
                  <el-input
                    placeholder="请输入内容"
                    v-model="demoParams.xiangmumingcheng"
                    style="width: 350px"
                    size="large"
                  >
                    <template #append>
                      <el-button
                        @click="GetDemoList"
                        style="min-width: 50px"
                        icon="Search"
                      />
                    </template>
                  </el-input>
                  <el-select
                    width="150"
                    show-border
                    class="ml20"
                    v-model="demoParams.xiangmuleixing"
                    size="large"
                    placeholder="类型"
                    clearable
                    @change="GetDemoList"
                  >
                    <el-option
                      v-for="item in demoType"
                      :key="item.dicValue"
                      :label="item.dicLabel"
                      :value="item.dicValue"
                    >
                      {{ item.dicLabel }}
                    </el-option>
                  </el-select>
                </div>
              </div>
              <el-table
                border
                :data="demoList"
                style="width: 100%; margin-top: 40px"
              >
                <el-table-column property="xmNo" label="编号" align="center" />
                <el-table-column
                  property="xiangmumingcheng"
                  label="项目名称"
                  align="center"
                />
                <el-table-column
                  property="chengshi"
                  label="城市（省市区）"
                  align="center"
                />
                <el-table-column
                  property="xiangmuleixing"
                  label="类型"
                  align="center"
                />
                <el-table-column
                  property="xiangmudizhi"
                  label="项目地址"
                  align="center"
                />
                <el-table-column
                  property="zhuangtai"
                  label="项目状态"
                  align="center"
                />
                <el-table-column
                  property="yunyingshang"
                  label="项目运营商"
                  align="center"
                />
                <el-table-column
                  property="xiangmufuzeren"
                  label="项目负责人"
                  align="center"
                />
                <el-table-column label="操作" align="center">
                  <template #default="scope">
                    <el-button
                      v-if="check === '1'"
                      style="min-width: auto"
                      link
                      type="primary"
                      size="small"
                      @click.prevent="onOperation(scope.row, 'demoDetail')"
                      >详情</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
              <h-page
                v-if="demoTotal"
                v-model:curr-page="demoParams.current"
                :size="demoParams.size"
                :total="demoTotal"
                @change="GetDemoList"
              />
              <div
                v-if="check === '1' && detail.shenhe.code == 0"
                class="mt40 flex-s"
              >
                <el-button @click="review(1)" size="large">通过</el-button>
                <el-button
                  @click="review(-1)"
                  class="ml50"
                  size="large"
                  type="primary"
                  >不通过</el-button
                >
              </div>
              <el-dialog
                class="list-dialog"
                show-close="false"
                width="40%"
                v-model="show"
                center
                style="padding: 0 30px"
              >
                <el-form :model="form">
                  <el-form-item label="不通过原因：">
                    <el-input
                      v-model="form.shenheBeizhu"
                      :maxlength="150"
                      type="textarea"
                      :rows="8"
                    ></el-input>
                  </el-form-item>
                </el-form>
                <el-form-item class="note-button-group">
                  <el-button size="large" @click="show = false">取消</el-button>
                  <el-button
                    class="ml50"
                    size="large"
                    type="primary"
                    @click="submitForm"
                  >
                    提交
                  </el-button>
                </el-form-item>
              </el-dialog>
            </el-tab-pane>
            <el-tab-pane class="achievement" label="产品推荐" name="2">
              <div class="head">
                <div class="left">
                  <el-input
                    v-model="productParams.chanpinmingcheng"
                    placeholder="请输入内容"
                    style="width: 300px"
                    size="large"
                  >
                    <template #append>
                      <el-button
                        @click="GetProductList"
                        style="min-width: 50px"
                        icon="Search"
                      />
                    </template>
                  </el-input>
                  <el-select
                    v-model="productParams.chanpinleixing1"
                    size="large"
                    class="ml10"
                    placeholder="一级分类"
                    clearable
                    @change="changeSelection1"
                    :loading="loading1"
                    style="width: 240px"
                  >
                    <el-option
                      v-for="item in type1"
                      :key="item.dicValue"
                      :label="item.dicLabel"
                      :value="item.dicValue"
                    />
                  </el-select>
                  <el-select
                    v-model="productParams.chanpinleixing2"
                    size="large"
                    placeholder="二级分类"
                    clearable
                    @visible-change="GetType2"
                    @change="changeSelection2"
                    :loading="loading2"
                    style="width: 240px; margin-left: 10px"
                  >
                    <el-option
                      v-for="item in type2"
                      :key="item.dicValue"
                      :label="item.dicLabel"
                      :value="item.dicValue"
                    />
                  </el-select>
                  <el-select
                    v-model="productParams.chanpinleixing3"
                    size="large"
                    placeholder="三级分类"
                    clearable
                    @visible-change="GetType3"
                    @change="GetProductList"
                    :loading="loading3"
                    style="width: 240px; margin-left: 10px"
                  >
                    <el-option
                      v-for="item in type3"
                      :key="item.dicValue"
                      :label="item.dicLabel"
                      :value="item.dicValue"
                    />
                  </el-select>
                </div>
                <div class="right">
                  <el-button
                    @click="onOperation({}, 'addProduct')"
                    type="primary"
                    size="large"
                    >添加商品</el-button
                  >
                </div>
              </div>
              <el-table
                border
                :data="productList"
                style="width: 100%; margin-top: 40px"
              >
                <el-table-column property="id" label="编号" align="center" />
                <el-table-column
                  width="300"
                  property="chanpinmingcheng"
                  label="商品名称"
                  align="center"
                />
                <el-table-column
                  property="chanpinleixing1"
                  label="一级分类"
                  align="center"
                />
                <el-table-column
                  property="chanpinleixing2"
                  label="二级分类"
                  align="center"
                />
                <el-table-column
                  property="chanpinleixing3"
                  label="三级分类"
                  align="center"
                />
                <el-table-column property="jiage" label="价格" align="center" />
                <el-table-column
                  property="zhuanjiamingcheng"
                  label="专家名称"
                  align="center"
                />
                <el-table-column
                  property="zhuanjialiuyanshu"
                  label="专家留言数"
                  align="center"
                />
                <el-table-column label="操作" align="center">
                  <template #default="scope">
                    <el-button
                      v-if="check === '1'"
                      style="min-width: auto"
                      link
                      type="primary"
                      size="small"
                      @click.prevent="onOperation(scope.row, 'productDetail')"
                      >详情</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
              <h-page
                v-if="productTotal"
                v-model:curr-page="productParams.current"
                :size="productParams.size"
                :total="productTotal"
                @change="GetProductList"
              />
            </el-tab-pane>
            <el-tab-pane class="commentInfo" label="评论信息" name="3">
              <div class="contain">
                <p>评论信息</p>
                <template v-for="(item, index) in commentList" :key="index">
                  <div class="comments">
                    <p class="mt30">{{ item.liuyanneirong }}</p>
                    <p class="mt30">{{ item.createTime }}</p>
                    <p class="title mt30">
                      {{
                        `(${item?.pinglunleixing?.value}) ` + item.pinglunshuju
                      }}
                    </p>
                  </div>
                </template>
              </div>
              <h-page
                v-if="commentTotal"
                v-model:curr-page="commentParams.current"
                :size="commentParams.size"
                :total="commentTotal"
                @change="GetCommentList"
              />
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { defineComponent, toRefs, reactive, watch } from "vue";
import {
  GetExpertCommentList,
  GetExpertDemoList,
  GetExpertDetail,
  GetExpertProductList,
  ReviewExpert,
} from "@/api/expert";
import { useRoute, useRouter } from "vue-router";
import { baseMsg } from "@/utils/utils";
import { GetDictionary, GetDictionaryTree } from "@/api/system";
export default defineComponent({
  setup() {
    const route = useRoute();
    const router = useRouter();
    const state = reactive({
      detail: {},
      activeName: "1",
      loading: true,
      show: false,
      check: localStorage.getItem("check"),
      // 审核表单
      form: {
        id: "",
        shenheBeizhu: "",
        shenhe: null,
      },

      // 业绩案例
      demoParams: {
        current: 1,
        size: 10,
        zjNo: "",
        xiangmumingcheng: "",
        xiangmuleixing: "",
      },
      demoType: [],
      demoList: [],
      demoTotal: 0,
      identity: localStorage.getItem("identity"),

      // 产品推荐
      productParams: {
        current: 1,
        size: 10,
        zjNo: "",
        chanpinmingcheng: "",
        chanpinleixing1: "",
        chanpinleixing2: "",
        chanpinleixing3: "",
      },
      productList: [],
      productTotal: 0,
      type1: [],
      type2: [],
      type3: [],
      loading1: true,
      loading2: true,
      loading3: true,

      // 评论信息
      commentParams: {
        current: 1,
        size: 20,
        zjNo: "",
      },
      commentList: [],
      commentTotal: 0,
    });
    // 获取专家详情
    const GetList = () => {
      state.loading = true;
      GetExpertDetail({
        id: route.query.id || Number(localStorage.getItem("loginId")),
      }).then((res) => {
        if (res.code == 4201) {
          state.detail = res.data;
          state.demoParams.zjNo = state.detail.zjNo;
          GetDemoList();
        }
        state.loading = false;
      });
      // 获取专家项目类型
      GetDictionaryTree({
        dicModel: "xiangmuleixing",
      }).then((res) => {
        if (res.code == 4201) {
          state.demoType = res.data;
        }
      });
    };
    // 一级分类查询
    const GetType1 = async () => {
      state.loading1 = true;
      const res = await GetDictionaryTree({
        dicModel: "gongyingshangpinzhuanjialeixing",
      });
      if (res.code == 4201) {
        state.type1 = res.data;
        state.loading1 = false;
      } else {
        state.loading1 = false;
      }
    };
    // 查询二级分类
    const GetType2 = (val) => {
      state.loading2 = true;
      state.type2 = [];
      if (state.productParams.chanpinleixing1) {
        GetDictionary({ dicId: state.productParams.chanpinleixing1 }).then(
          (res) => {
            if (res.code == 4201) {
              state.type2 = res.data;
            }
          }
        );
        state.loading2 = false;
      } else {
        state.loading2 = false;
      }
    };
    // 查询三级分类
    const GetType3 = (val) => {
      state.loading3 = true;
      state.type3 = [];
      if (state.productParams.chanpinleixing2) {
        GetDictionary({ dicId: state.productParams.chanpinleixing2 }).then(
          (res) => {
            if (res.code == 4201) {
              state.type3 = res.data;
            }
          }
        );
        state.loading3 = false;
      } else {
        state.loading3 = false;
      }
    };
    // 分类选中值改变
    const changeSelection1 = () => {
      state.type2 = [];
      state.type3 = [];
      state.productParams.chanpinleixing2 = "";
      state.productParams.chanpinleixing3 = "";
      GetProductList();
    };
    const changeSelection2 = () => {
      state.type3 = [];
      state.productParams.chanpinleixing3 = "";
      GetProductList();
    };
    // 审核通过/不通过
    const review = (status) => {
      state.form.id = state.detail.id;
      state.form.shenhe = status;
      if (status === -1) {
        state.show = true;
      } else {
        ReviewExpert(state.form).then((res) => {
          if (res.code == 4202) {
            baseMsg("操作成功");
            router.go(-1);
          }
        });
      }
    };
    // 审核不通过原因提交
    const submitForm = () => {
      if (!state.form.shenheBeizhu) {
        baseMsg("请输入不通过原因", false);
      } else {
        ReviewExpert(state.form).then((res) => {
          if (res.code == 4202) {
            baseMsg("操作成功");
            router.go(-1);
          }
        });
      }
    };
    // 获取产品列表分页
    const GetProductList = () => {
      GetExpertProductList(state.productParams).then((res) => {
        if (res.code == 4201) {
          state.productList = res.data.records;
          state.productTotal = res.data.total;
        }
      });
    };
    // 获取评论信息分页
    const GetCommentList = () => {
      GetExpertCommentList(state.commentParams).then((res) => {
        if (res.code == 4201) {
          state.commentList = res.data.records;
          state.commentTotal = res.data.total;
        }
      });
    };
    // 获取业绩案例分页数据
    const GetDemoList = () => {
      GetExpertDemoList(state.demoParams).then((res) => {
        if (res.code == 4201) {
          state.demoList = res.data.records;
          state.demoTotal = res.data.total;
        }
      });
    };
    const tabChange = (item) => {
      if (item.props.name == "1") {
        state.demoParams.zjNo = state.detail.zjNo;
        GetDemoList();
      }
      if (item.props.name == "2") {
        state.productParams.zjNo = state.detail.zjNo;
        GetProductList();
        GetType1();
      }
      if (item.props.name == "3") {
        state.commentParams.zjNo = state.detail.zjNo;
        GetCommentList();
      }
    };
    const onOperation = (params, operation) => {
      if (operation === "productDetail") {
        router.push({
          path: "/chanpin/detail",
          query: {
            id: params.cpId,
          },
        });
      }
      if (operation === "addProduct") {
        router.push({
          path: "/zhuanjia/addProduct",
          query: {
            zjNo: state.detail.zjNo,
          },
        });
      }
      if (operation === "demoDetail") {
        router.push({
          path: "/xiangmu/detail",
          query: {
            id: params.xmId,
          },
        });
      }
    };
    watch(
      () => route.query,
      () => {
        state.demoParams.current = Number(route.query.page) || 1;
        state.productParams.current = Number(route.query.page) || 1;
        state.commentParams.current = Number(route.query.page) || 1;
        GetDemoList();
        GetCommentList();
        GetProductList();
      },
      { deep: true }
    );
    GetList();
    return {
      ...toRefs(state),
      GetList,
      onOperation,
      review,
      submitForm,
      tabChange,
      changeSelection1,
      changeSelection2,
      GetType1,
      GetType2,
      GetType3,
      GetProductList,
      GetDemoList,
      GetCommentList,
    };
  },
});
</script>
<style lang="scss" scoped>
.content {
  border: none !important;
  .container {
    padding: 50px;
    .head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 40px;
    }
  }
  .certification {
    img {
      border-radius: 4px;
      &:not(:first-child) {
        margin-left: 20px;
      }
    }
  }
}
.title {
  font-weight: bold;
  color: #000;
  font-size: 12px;
}
.flex {
  display: flex;
  margin-bottom: 30px;
}
p {
  font-size: 12px;
  color: #333333;
}
.body {
  padding-left: 40px;
  padding-right: 100px;
  .avatar {
    align-items: center;
    img {
      width: 100px;
      height: 100px;
      border-radius: 50%;
    }
  }
  .info {
    flex-wrap: wrap;
    p {
      width: 25%;
    }
  }
  .certificationImg {
    img {
      margin-top: 20px;
      width: 120px;
      height: 100px;
    }
  }
  .excel {
    max-width: 400px;
    .intro {
      color: #333;
      font-size: 12px;
    }
  }
}
.bottom {
  background-color: #ccc;
  height: 1px;
}
.providerTable {
  padding: 20px 50px 50px 50px;
  .provider-tabs {
    position: relative;
    &::before {
      position: absolute;
      content: "";
      width: 100%;
      height: 1px;
      background-color: #e4e4e4;
      top: -20px;
      left: 0;
    }
  }
}
.principalInfo {
  position: relative;
  .addPrincipal {
    position: absolute;
    right: 50px;
    top: -20px;
  }
  .principal {
    margin-top: 30px;
    .principalTable {
      margin-top: 15px;
      margin-bottom: 30px;
      border-radius: 6px;
      padding: 0 40px 0 15px;
      border: 1px solid #ccc;
      .principal-list {
        &:not(:last-child) {
          border-bottom: 1px solid #ccc;
        }
        position: relative;
        padding: 20px 0;
        .introduction {
          display: flex;
          .avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: #ccc;
          }
          .intro-right {
            margin-left: 10px;
            font-size: 12px;
          }
        }
        .deleteButton {
          position: absolute;
          right: 40px;
          top: 50%;
          transform: translateY(-50%);
        }
      }
    }
  }
}
.achievement {
  .head {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
.commentInfo {
  padding: 0 50px 0 20px;
  .contain {
    .comments {
      padding: 0 30px 20px 30px;
      position: relative;
      &::after {
        position: absolute;
        width: 100%;
        bottom: 0;
        left: 0;
        content: "";
        height: 1px;
        background-color: #e4e4e4;
      }
    }
  }
}
</style>
<style lang="scss">
.el-tabs__nav-wrap {
  &::after {
    display: none;
  }
}
.providerTable .el-table__header th {
  background-color: #f2f9fc !important;
}
.note-button-group {
  .el-form-item__content {
    justify-content: center;
  }
}
</style>
